<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="home/public/head::head(~{::title},~{::style},~{})">
    <title>添加轮播图-答题吧</title>
    <style>
        .img-rounded {
            max-height: 150px;
            max-width: 180px;
        }
    </style>
</head>

<body>
<div class="container" style="margin-bottom: 5%;">
    <div class="row">
        <div class="col-md-12" style="margin-top: 30px;">
            <form class="layui-form layui-form-pane" id="form" enctype="multipart/form-data" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详情地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="detailUrl" placeholder="请输入详情页面地址" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">启用状态</label>
                    <div class="layui-input-block">
                        <input type="radio" lay-verify="required" name="useState" value="true" title="启用" checked>
                        <input type="radio" lay-verify="required" name="useState" value="false" title="停用">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-inline">
                        <button type="button" onclick="clearImg();" class="layui-btn" id="uploadimg">
                            <i class="layui-icon">&#xe67c;</i>选择图片
                        </button>
                    </div>
                    <div class="layui-input-inline" id="imgBox"></div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formRegister">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:inline="javascript">

    layui.use(['form', 'upload'], function () {
        var form = layui.form
            , upload = layui.upload;

        //图片上传
        var uploadInst = upload.render({
            elem: '#uploadimg'
            , multiple: false//多图上传，不支持IE8/9
            , field: 'file'//后台接收字段名
            , auto: false//不自动上传
            , acceptMime: 'image/*'//（只显示图片文件）
            , choose: function (obj) { //选择图片后执行
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                $("#imgBox").empty();
                obj.preview(function (index, file, result) {
                    var img = "<img src='" + result + "'alt='' class='img-rounded'>";
                    $("#imgBox").append(img);
                });
            }
        });

        //监听提交
        form.on('submit(formRegister)', function (data) {
            console.log(data.field);
            var formData = new FormData($("#form")[0]);
            if (data.field.file == null || data.field.file == "") {
                layer.msg("请上传图片！", {icon: 2, time: 1500});
                return false;
            }
            //提交表单，登录验证
            $.ajax({
                url: "/admin/carousel/add",
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.success == true) {
                        layer.msg(res.errMsg, {icon: 1, time: 1500});
                        setTimeout(refresh, 1500);
                    } else {
                        layer.msg(res.errMsg, {icon: 2, time: 1500});
                    }

                    console.log(res);
                },
                error: function (res) {
                    layer.msg(res, {icon: 2, time: 1500});
                },
                complete: function () {
                }
            });
            return false;
        });
    });

    /*清除回显图片*/
    function clearImg() {
        $("#imgBox").empty();
    }
</script>
</body>
</html>
